<!--
 * @description:
 * @fileName: index
 * @author: 17076
 * @date: 2025/3/19-下午4:43
 * @version: V1.0.0
-->

<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="12">
        <div class="left-roles" :style="{ height: $baseTableHeight(-120) + 'px' }">
          <el-row v-if="rolesList.length > 0" :gutter="10">
            <el-col v-for="item in rolesList" :key="item.id" :span="6">
              <div class="flex-column roles-content" @click="handleSelect(item)">
                <el-image :src="downloadUrl + item.fileId" :class="[ currentRoles === item.id ? 'active' : '']" />
                <span>{{ item['name'] }}</span>
                <!--具有多套形象时显示-->
                <span class="roles-tag">角色形象</span>
              </div>
            </el-col>
          </el-row>
          <el-empty v-else description="暂无角色数据" style="height: 100%">
            <template slot="image">
              <img src="@/assets/common/empty_role.png"/>
            </template>
          </el-empty>
        </div>
      </el-col>
      <el-col :span="12">
        <base-card title="预览">
          <div class="right-content" :style="{ height: $baseTableHeight(-60) + 'px' }">
            <template v-if="rolesImages.length > 0">
              <div v-for="(item, index) in rolesImages" :key="index">
                <p>{{ item.dress }}</p>
                <el-row :gutter="10">
                  <el-col v-for="(angle, angleIndex) in item.images" :key="angleIndex" :span="6">
                    <div v-if="angle['fileId']" class="flex-column" style="align-items: center">
                      <el-image :src="downloadUrl + angle.fileId" fit="contain" class="right-angle-image" />
                      <span style="margin-top: 10px">{{ angle['angle'] }}</span>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </template>
            <el-empty v-else description="选择左侧角色数据查看" style="height: 100%">
              <template slot="image">
                <img src="@/assets/common/empty_role.png"/>
              </template>
            </el-empty>
          </div>
        </base-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { baseURL } from '@/config/net.config'
import { commonDownloadFile } from '@/api/config/uploadApi'
import {selectByPlayRoleId, selectFinishedRole} from '@/api/roles'
export default {
  name: 'Index',
  props: {
    playId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // 当前选中的角色
      currentRoles: 0,
      // 图片下载链接
      downloadUrl: baseURL + commonDownloadFile,
      // 当前选中的角色形象列表
      rolesImages: [
        // { dress: '常服', images: [
        //   { src: '', angle: '正面' }
        // ] },
        // { dress: '战甲', images: [
        //   { src: '', angle: '正面' }
        // ] }
      ],
      // 角色数据
      rolesList: []
    }
  },
  mounted() {
    this.queryRolesData()
  },
  methods: {
    // 查询角色数据
    queryRolesData() {
      if (!this.playId) return
      selectFinishedRole({ playId: this.playId }).then(res => {
        this.rolesList = res.data
        if (this.rolesList.length > 0) {
          this.currentRoles = res.data[0].id
          this.getRolesImages(res.data[0])
        }
      })
    },
    // 角色点击
    handleSelect(item) {
      console.log(item, 8989)
      this.currentRoles = item.id
      this.getRolesImages(item)
    },
    // 获取角色形象
    getRolesImages(item) {
      selectByPlayRoleId({ playRoleId: item.playRoleId }).then(res => {
        this.rolesImages = res.data
      })
    }
  }
}
</script>

<style scoped lang="scss">
.left-roles {
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  padding: 10px;
  box-sizing: border-box;
  color: #FFFFFF;
  background: $base-content-background;
  border-radius: 8px;
  .roles-content {
    align-items: center;
    margin-bottom: 10px;
    cursor: pointer;
    position: relative;
    &:hover {
      .el-image {
        border: 1px solid $base-color-default;
      }
    }
    .el-image {
      width: 100%;
      height: 220px;
      border-radius: 8px;
      border: 1px solid transparent;
      &.active {
        border: 1px solid $base-color-default;
      }
    }
    span {
      margin-top: 10px;
    }
    .roles-tag {
      position: absolute;
      right: 10px;
      top: 10px;
      background: rgba(18, 20, 24, 0.50);
      font-size: 12px;
      padding: 6px 10px;
      border-radius: 5px;
      margin-top: 0;
    }
  }
}
.right-content {
  color: #FFFFFF;
  background: $base-content-background;
  overflow-y: auto;
  .right-angle-image {
    width: 100%;
    max-height: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    object-fit: contain;
  }
}
</style>
